<template>
  <n-modal class="sale-return" v-model:show="saleReturnModalActive" transform-origin="center">
    <n-card
      style="width: 60%"
      :bordered="false"
      size="huge"
      role="dialog"
      aria-modal="true"
    >
      <template #header>
        <div class="my-title--modal">退货</div>
      </template>
      <div class="r-table">
        <n-data-table :columns="columns" :data="data" bordered style="--n-font-size:24px" />
      </div>
      <div class="r-return-amount">
        <div class="r-return-amount_title">退回金额渠道</div>
        <div class="r-return-amount_item">
          <div class="r-return-amount_item_left">至尊钱包</div>
          <div class="r-return-amount_item_right">
            <span class="r-return-amount_item_right-amount">0</span>元
          </div>
        </div>
        <div class="r-return-amount_item">
          <div class="r-return-amount_item_left">需退回现金</div>
          <div class="r-return-amount_item_right">
            <span class="r-return-amount_item_right-amount">198</span>元
          </div>
        </div>
      </div>
      <div class="r-tip">
        <div class="r-tip_title">
          <div class="r-tip_title_icon iconfont icon-guanyu"></div>
          <span class="r-tip_title_text">提示：</span>
        </div>
        <p class="r-tip_content">订单退单，退单后，赠送的产品需退回本店！</p>
        <p class="r-tip_content">相关积分和奖励将在以后奖励时扣除！</p>
        <p class="r-tip_content">使用代金卷，参与优惠活动的，不作退回！</p>
      </div>
      <template #footer>
         <div class="r-footer">
          <button class="my-btn--primary">确认</button>
        </div>
      </template>
    </n-card>
  </n-modal>
</template>

<script setup>
  import {
    reactive,
    inject
  } from "vue";

  let saleReturnModalActive = inject('saleReturnModalActive')

  const columns = [{
      title: "退换商品",
      key: "goods"
    },
    {
      title: "规格",
      key: "spec"
    },
    {
      title: "数量",
      key: "quantity"
    },
    {
      title: "单价￥",
      key: "amount"
    }
  ]
  const data = reactive([{
      goods: 'B1-4042带腿胸托',
      spec: "黑色/XL",
      quantity: 1,
      amount: 248
    },
    {
      goods: 'B1-4042带腿胸托',
      spec: "黑色/XL",
      quantity: 1,
      amount: 248
    },
    {
      goods: 'B1-4042带腿胸托',
      spec: "黑色/XL",
      quantity: 1,
      amount: 248
    }
  ]);
</script>

<style lang="less" scoped>
  .sale-return {

    .r-table {
      margin: 20px 40px 20px 20px;
    }

    .r-return-amount {
      margin-left: 30px;

      &_title {
        position: relative;
        margin-bottom: 30px;
        font-size: 28px;
        font-weight: 500;
        color: #4A5060;

        &::before {
          position: absolute;
          top: 11px;
          left: -15px;
          content: "";
          width: 6px;
          height: 24px;
          background: #373B4F;
        }
      }

      &_item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 340px;
        height: 60px;
        padding: 0 20px;
        margin-bottom: 20px;
        font-size: 26px;
        font-weight: 500;
        background: #F8F8F8;
        border: 1px solid #E5E5E5;
        border-radius: 5px;

        &_left {
          color: #2E323D;
        }

        &_right {
          &-amount {
            margin-right: 10px;
            color: #1981F4;
          }
        }
      }
    }

    .r-tip {
      width: 900px;
      height: 180px;
      padding: 20px;
      margin-left: 20px;
      background: #FFF7EC;
      border-radius: 5px;
      overflow-y: auto;

      &_title {
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        &_icon {
          width: 24px;
          height: 24px;
          margin-right: 10px;
          color: #fe9f1b;
          font-size: 30px;
          line-height: 25px;
        }

        &_text {
          font-size: 22px;
          font-weight: 400;
          color: #4A5060;
        }
      }

      &_content {
        position: relative;
        margin: 0 0 20px 58px;
        font-size: 22px;
        font-weight: 500;
        color: #fe9f1b;
        line-height: 18px;

        &::before {
          position: absolute;
          top: 5px;
          left: -18px;
          content: "";
          width: 10px;
          height: 10px;
          background: #666;
          border-radius: 50%;
        }
      }

    }
    .r-footer {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
</style>